<template>
  <view class="main">
    <!-- 实名认证 -->
    <view class="top">
      <image class="top-pic" src="/static/images/shop/bgk5.png" mode=""></image>
    </view>

    <view class="conent-warp">
      <view class="title-warp">
        <text class="title">提交身份认证资料</text>
      </view>
      <view class="conent-box">
        <t-title width="100%" height="76rpx" style="margin: 17rpx 0">
          <view slot="left">
            <text class="font-333" style="font-size: 28rpx">姓名</text>
          </view>
          <view slot="right">
            <input
              type="text"
              value=""
              v-model="resForm.name"
              class="input"
              placeholder="请输入您的姓名"
              placeholder-class="font-999"
            />
          </view>
        </t-title>
        <t-title width="100%" height="76rpx" style="margin: 17rpx 0">
          <view slot="left">
            <text class="font-333" style="font-size: 28rpx">身份证号</text>
          </view>
          <view slot="right">
            <input
              type="number"
              value=""
              v-model="resForm.number"
              class="input"
              placeholder="请输入您的身份证号"
              placeholder-class="font-999"
            />
          </view>
        </t-title>
        <t-title width="100%" height="76rpx" style="margin: 17rpx 0">
          <view slot="left">
            <text class="font-333" style="font-size: 28rpx">上传图片</text>
          </view>
        </t-title>
        <!-- <view class="photo-warp">
					<image-upload2 v-model="just_image" :boxStyle="{}" :imgStyle="{width:'428rpx',height:'260rpx'}"
						:limit="1" @long="deleteImage">
						<image class="photo" src="../static/bgk6.png" mode=""></image>
					</image-upload2>
					<t-dialog ref="dialog"></t-dialog>
					<text class="txt">添加身份证正面</text>
				</view>
				<view class="photo-warp">
					<image-upload2 v-model="back_image" :boxStyle="{}" :imgStyle="{width:'428rpx',height:'260rpx'}"
						:limit="1" @long="deleteImage2">
						<image class="photo" src="../static/bgk7.png" mode=""></image>
					</image-upload2>
					<t-dialog ref="dialog2"></t-dialog>
					<text class="txt">添加身份证反面</text>
				</view> -->
      </view>
    </view>

    <view class="submit-box" @click="submit">
      <text class="submit-txt">确认</text>
    </view>

    <t-blank :height="200" :width="100"></t-blank>
  </view>
</template>

<script>
// import route from '@/common/mixins/route.js';
// import {
// 	autonymApi
// } from '@/api/userApi.js';
// import imageUpload2 from '@/components/image-upload/image-upload2.vue'

export default {
  //注册组件
  components: {
    // 'image-upload2': imageUpload2,
  },
  //mixins: [route],
  data() {
    return {
      resForm: {
        name: '',
        number: '',
      },
      just_image: [],
      back_image: [],
      tag: null,
    };
  },
  //监听属性
  computed: {
    // test: {
    // 	//业务逻辑代码,test的值完全取决于return回来的值
    // 	get:()=> {return 2; },
    // 	set: (val)=> {}
    // }
  },
  /**
   * 监控data中的数据变化
   */
  watch: {
    // test: {
    // 	handler(newValue, oldValue) {
    // 	},
    // 	deep: true,	//深度监听
    // 	immediate: true,// 立即先去执行里面的handler方法
    // }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (option) {},
  /** 方法合集 */
  methods: {
    // 提交实名认证
    submit() {
      let that = this;
      autonymApi({
        just_image: that.just_image[0],
        back_image: that.back_image[0],
        ...that.resForm,
      })
        .then(res => {
          console.log('实名认证成功========>', JSON.parse(JSON.stringify(res)));
          uni.showToast({
            title: res.msg,
          });
          setTimeout(function () {
            if (that.tag == 2) {
              that.$switchTab('/pages/index/my');
            } else {
              that.$navigateBack(1);
            }
          }, 1000);
        })
        .catch(err => {
          console.log('实名认证失败', err);
          setTimeout(function () {
            if (that.tag == 2) {
              that.$switchTab('/pages/index/my');
            } else {
              that.$navigateBack(1);
            }
          }, 1000);
        })
        .finally(callback => {});
    },
    // 删除图片--正面
    deleteImage(e) {
      console.log(e);
      this.$refs.dialog.show({
        title: '提示',
        msg: '是否删除？',
        btns: [
          {
            name: '取消',
            color: '#999999',
          },
          {
            name: '确定',
            color: '#3b94f3',
          },
        ],
        mask: true,
        maskTapClose: false,
        theme: 1,
        callback: res => {
          console.log('res', res);
          if (res.index == 1) {
            this.just_image.splice(e, 1);
          }
        },
      });
    },
    // 删除图片--反面
    deleteImage2(e) {
      console.log(e);
      this.$refs.dialog.show({
        title: '提示',
        msg: '是否删除？',
        btns: [
          {
            name: '取消',
            color: '#999999',
          },
          {
            name: '确定',
            color: '#3b94f3',
          },
        ],
        mask: true,
        maskTapClose: false,
        theme: 1,
        callback: res => {
          console.log('res', res);
          if (res.index == 1) {
            this.back_image.splice(e, 1);
          }
        },
      });
    },
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},
  // 页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh: function () {},
  // 页面上拉触底事件的处理函数
  onReachBottom: function () {},
  //  点击 tab 时触发，参数为Object，具体见下方注意事项           微信小程序、百度小程序、H5、5+App（自定义组件模式）
  onTabItemTap: function (e) {},
  //  监听页面滚动，参数为Object
  onPageScroll: function (e) {},
  //  监听原生标题栏按钮点击事件，参数为Object	         5+ App、H5
  onNavigationBarButtonTap: function (e) {},
  //  监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解	5+App、H5
  onBackPress: function () {},
};
</script>
<style lang="scss" scoped>
// @import "@/styles/t-base.scss";

.main {
  position: relative;
  @include t-flex(column);
  align-items: center;
  width: 750rpx;
  padding: 0 28rpx;

  .top {
    position: absolute;
    top: 0;
    left: 0;
    // z-index: 0;
    @include t-flex(column);
    align-items: center;
    justify-content: center;
    width: 750rpx;
    height: 328rpx;
    background-color: #e02020;
    border-bottom-left-radius: 10%;
    border-bottom-right-radius: 10%;

    .top-pic {
      width: 344rpx;
      height: 168rpx;
    }
  }

  .conent-warp {
    margin-top: 300rpx;
    width: 100%;
    position: relative;
    .title-warp {
      @include t-flex(column);
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 130rpx;
      background-color: #ffffff;
      border-radius: 12rpx;
      box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(235, 235, 235, 0.5);

      .title {
        font-size: 32rpx;
        color: #333333;
      }
    }

    .conent-box {
      margin-top: 20rpx;
      width: 100%;
      background-color: #ffffff;
      box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(235, 235, 235, 0.5);
      border-radius: 12rpx;
      padding-top: 11rpx;
      padding-bottom: 48rpx;

      .input {
        width: 494rpx;
        height: 68rpx;
        background: #f8f8f8;
        border-radius: 8rpx;
        padding-left: 28rpx;
      }

      .photo-warp {
        width: 100%;
        @include t-flex(column);
        align-items: center;
        justify-content: center;
        margin-bottom: 48rpx;

        .photo {
          margin-bottom: 20rpx;
          width: 428rpx;
          height: 260rpx;
        }

        .txt {
          font-size: 28rpx;
          color: #666666;
        }
      }
    }
  }
}

// 确认
.submit-box {
  width: 694rpx;
  height: 88rpx;
  margin: 120rpx auto 0;
  text-align: center;
  background-color: #7654ff;
  border-radius: 12rpx;

  .submit-txt {
    font-size: 32rpx;
    color: #ffffff;
    line-height: 88rpx;
  }
}

.font-333 {
  color: #333333;
}

.font-999 {
  font-size: 24rpx;
  font-size: #b9bdba;
}
</style>
